<script setup lang="ts">
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, watch ,ref} from 'vue'
import { ViewData } from '@/api/types/userType'
import { ContentWrap } from '@/components/ContentWrap'
import { useValidator } from '@/hooks/web/useValidator'
import {ElAutocomplete, ElInput,ElSelect,ElButton,ElIcon,ElRadioGroup,ElRadio,ElInputNumber,ElDivider,ElMessage} from "element-plus"
import { Search } from '@element-plus/icons-vue'
import api from '@/api'
const {searchMemberDevice}=api;
const { required} = useValidator()

const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<ViewData>>,
    default: () => null
  },
  formSchema: {
    type: Array as PropType<FormSchema[]>,
    default: () => []
  }
})
const { register, methods, elFormRef } = useForm({schema: props.formSchema});
const rules = reactive({
  recordDate:[required()],
  teacher: [required()],
  item1: [required()],
  item2: [required()],
  item3: [required()],
  item4: [required()],
  item5: [required()],
  item6: [required()],
  item7: [required()],
  item8: [required()],
  item9: [required()],
})
const searchStr=ref('')
const searchRef=ref();
const formData=ref({})
watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return;
    const { setValues } = methods;
    setValues(currentRow) ;   
    console.log(currentRow)
    formData.value=currentRow;
    elFormRef;
  },
  {
    deep: true,
    immediate: true
  }
)
watch(()=>formData.value,(formData)=>{
  const { setValues } = methods;
    setValues(formData) ;   
},{
  deep: true,
  immediate: true
})

const querySearchfetch =async (queryString: string, cb: any) => {
  const res=await searchMemberDevice({name:queryString});
  const data=res.data.map((item:any)=>({...item,value:item.name}));
  cb(data)
}
const handleSelect = (item: any) => {
  searchRef.value.activated=false;
  formData.value={name:item.name,memberNo:item.member_no,memberId:item.id, sex:item.sex,age:item.age,phone:item.phone};
}
const getFormData=async ()=>{
  const data=await methods.getFormData();
  const pageData={...formData.value,...data,recordDate:data.recordDate,teacher:data.teacher};
  if(!formData.value.memberId){
    ElMessage.error("请选择被测人员")
    return;
  }
  return pageData;
}

defineExpose({
  elFormRef,
  getFormData:getFormData
})
</script>

<template>
  <ContentWrap style="width: 800px;margin: 0 auto;background-color: azure;">
    <div v-if="!currentRow?.id">
    <ElAutocomplete  ref="searchRef" @select="handleSelect" placeholder="请输入姓名" v-model="searchStr" :fetch-suggestions="querySearchfetch">
      <template #suffix><ElIcon><Search/></ElIcon></template>
      <template #default="{ item }">
        <div style="display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;gap:10px;justify-items: center;">
          <span>{{ item.member_no }}</span>
          <span>{{ item.name }}</span>
          <span>{{ item.sex }}</span>
          <span>{{ item.age }}岁</span>
        
      </div>
      </template>
    </ElAutocomplete>
  </div>
  <Form :rules="rules"  @register="register" :model="formData">
    <template #name> {{ formData?.name }} </template>
    <template #memberNo> {{ formData?.memberNo }} </template>
    <template #sex> {{ formData?.sex }} </template>
    <template #age> {{ formData?.age }} </template>
    <template #phone> {{ formData?.phone }} </template>
    <template #item1>
      <ElInputNumber v-model="formData.item1" :min="0"  :step="1" />　秒
    </template>
    <template #item6>
      <ElInputNumber v-model="formData.item6" :min="0"  :step="1" />　次
    </template>
  </Form>
  </ContentWrap>
</template>
<style scoped lang="less">
:deep(.el-divider__text){
  background: transparent;
  &::before{
    content:'';
    width:10px;
    height:10px;
    margin-right: 5px;
    display: inline-block;
    background: #039bf3;
  }
}
</style>
